<template>
	<view class="">
		<view class="add_pingjia">
			<view class="info_top">
				<view class="item_title">{{infoObj.name}}</view>
				<view class="item_center">
					<image src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?pid=ImgDet&rs=1">
					</image>
					<view class="i_c_right">
						<view class="name_price">
							<text class="name2">{{infoObj.name2}}</text>
							<text class="price">￥{{infoObj.price}}</text>
						</view>
						<view class="name_price time_num">
							<text>
								<text v-if="!infoObj.isJiuDian">日期：</text>
								{{infoObj.time}}
							</text>
							<text>×{{infoObj.number}}</text>
						</view>
						<view class="time2">
							<text v-if="infoObj.isJiuDian">入离时间：</text>
							<text v-else>时间：</text>
							<text>{{infoObj.time2}}</text>
						</view>
						<view class="label">
							<text v-if="infoObj.isJiuDian && infoObj.label">
								<text class="label_item" v-for="(i2,index2) in infoObj.label.split(',')"
									:key="index2">{{i2}}</text>
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="fenshu">
				<text>评分</text>
				<u-rate v-model="pingfen.fenshu" size='20' activeColor="#ffff00" allowHalf></u-rate>
			</view>
			<uni-easyinput type="textarea" autoHeight v-model="pingfen.content" maxlength="100" cursorSpacing="10"
				placeholder="分享一下你本次的游玩体验吧" :styles='styles' inputBorder></uni-easyinput>
			<view class="upload_img">
				<u-upload :fileList="pingfen.imgUrl" @delete="deletePic" multiple :maxCount="9"
					:previewFullImage="true">
					<image  :src="config.imgUrl+'upload.jpg'" mode="widthFix" style="width: 686rpx;height: 216rpx;">
					</image>
				</u-upload>
			</view>
		</view>
		<view class="upload_add">
			<u-button text="发布评价" shape="circle" color='#0E9589' :loading="loading" loadingText="提交中"
				@click="uploadAdd">
			</u-button>
		</view>
	</view>
</template>

<script>
import config from '@/config'
	export default {
		data() {
			return {
				config,
				loading: false,
				styles: {
					color: "#a6a6c4"
				},
				infoObj: {},
				pingfen: {
					fenshu: 1.5, // 分数
					content: "", //内容
					imgUrl: [{
							url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?pid=ImgDet&rs=1'
						},
						{
							url: 'https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0'
						},
						{
							url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK?pid=ImgDet&rs=1'
						},
						{
							url: 'https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0'
						},
						{
							url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1'
						},
						{
							url: 'https://ts1.cn.mm.bing.net/th/id/R-C.df4462fabf18edd07195679a5f8a37e5?rik=FnNvr9jWWjHCVQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50059%2f8720.jpg_wh1200.jpg&ehk=ofb4q76uCls2S07aIlc8%2bab3H5zwrmj%2bhqiZ%2fyw3Ghw%3d&risl=&pid=ImgRaw&r=0'
						}, {
							url: 'https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0'
						},
						{
							url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1'
						},
						{
							url: 'https://ts1.cn.mm.bing.net/th/id/R-C.df4462fabf18edd07195679a5f8a37e5?rik=FnNvr9jWWjHCVQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50059%2f8720.jpg_wh1200.jpg&ehk=ofb4q76uCls2S07aIlc8%2bab3H5zwrmj%2bhqiZ%2fyw3Ghw%3d&risl=&pid=ImgRaw&r=0'
						}
					]
				}
			};
		},

		onLaunch() {},

		onLoad(params) {
			const data = JSON.parse(params.data)
			this.infoObj = data;
		},
		methods: {
			// 删除上传的图片
			deletePic(e) {
				console.log(e)
				this.pingfen.imgUrl.splice(e.index, 1)
			},

			// 上传按钮
			uploadAdd() {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
				}, 1500)
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.add_pingjia {
		width: 750rpx;
		padding: 16rpx 30rpx 0 30rpx;
		position: relative;

		.info_top {
			margin: 0 auto;


			.item_title {
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 24rpx;
				font-weight: bolder;
			}

			.item_center {
				width: 100%;
				display: flex;
				align-items: flex-start;

				image {
					display: inline-block;
					width: 176rpx !important;
					height: 176rpx;
					border-radius: 12rpx;
					margin-right: 22rpx;
				}

				.i_c_right {
					flex: 2.2;

					.name_price {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name2,
						.price {
							font-size: 32rpx;
							color: #333333;
							line-height: 45rpx;
							font-weight: bolder;
						}

						.price {
							font-size: 24rpx;
						}
					}

					.time_num,
					.time2 {
						margin: 10rpx 0;
						font-size: 24rpx;
						color: #999999;
					}

					.label {
						.label_item {
							padding: 6rpx 16rpx;
							margin-right: 16rpx;
							color: #FF841C;
							font-size: 20rpx;
							height: 32rpx;
							background: rgba(255, 242, 230, 1);
						}
					}
				}
			}

			.item_bottom {
				margin-top: 36rpx;
				text-align: right;

				.price2 {
					font-size: 28rpx;
					font-weight: bolder;
					color: #333333;

					.price2_num {
						font-size: 32rpx;
						color: #FF841C;
					}
				}

				._pingjia {
					text-align: right;
					margin-top: 32rpx;
					height: 64rpx;
					line-height: 64rpx;

					text {
						display: inline-block;
						width: 176rpx;
						text-align: center;
						background: #FFFFFF;
						border-radius: 164rpx;
						border: 2rpx solid #999999;
						font-size: 28rpx;
						color: #999999;
					}
				}
			}
		}

		.fenshu {
			display: flex;
			align-items: center;
			margin: 42rpx 0;

			text {
				font-size: 32rpx;
				color: #333333;
			}
		}

		.upload_img {
			margin-top: 20rpx;
		}

	}

	.upload_add {
		height: 144rpx;
		margin-top: 120rpx;
		border-top: 1rpx solid #E7E4E4;
		position: relative;
	}

	// 样式重置
	.u-upload__wrap {
		// justify-content: space-between;
	}

	.u-upload__wrap__preview {
		margin: 0 0 18rpx 18rpx !important;
		&:nth-child(3n-2){
			margin-left: 0 !important;
		}
	}

	.u-upload__wrap__preview__image {
		width: 218rpx !important;
		height: 218rpx !important;
	}

	.u-upload__button {
		width: 100% !important;
	}

	.u-button {
		width: 288rpx !important;
		height: 64rpx !important;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
